<template>
  <van-tabbar v-model="active" active-color="#000" route >
    <van-tabbar-item icon="home-o" to="/">
      主页
      <span v-if="active === 0" class="dot"></span>
    </van-tabbar-item>
    <van-tabbar-item icon="sign" to="/Booking">
      预约
      <span v-if="active === 1" class="dot"></span>
    </van-tabbar-item>
    <van-tabbar-item icon="logistics" to="/Map">
      地图
      <span v-if="active === 2" class="dot"></span>
    </van-tabbar-item>
    <van-tabbar-item icon="setting-o" to="/Personal">
      我的
      <span v-if="active === 3" class="dot"></span>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
import { ref } from 'vue'
const active = ref(0)
</script>

<style scoped>
.van-tabbar-item {
  z-index: 1;
}

.dot {
  position: absolute;
  width: 30px;
  height: 30px;
  z-index: -1;
  /* 定位到标签后面 */
  transform: translate(-75%, -80%);
  border-radius: 50%;
  background: #d7ff47;
}
</style>
